<template>
	<div class="wy-main supply-pulish">
		<a-form :form="form" @submit="handleSubmit">
			<!--零但、长途、同城线路信息-->
			<div v-if="supplyType == 1 || supplyType == 2" class="route_choice">
				<p><b>线路信息</b></p>
				<a-row>
					<a-col :span="12" class="choice-left">
						<div class="distance" v-if="distance" style="left: 67%">
							<div class="border-top"></div>
							约<span style="color: red;">{{distance}}</span>公里
							<div class="border-bottom"></div>
						</div>
						<a-form-item label="出发地" :label-col="{ span: 4 }" :wrapper-col="{ span: 16 }">
							<a-input readOnly style="width: 280px;" @click="departureShowMap" v-decorator="[ 'fromCity', {rules: [{ required: true, message: '请选择出发地!' }]}]" placeholder='请选择出发地' ref="userNameInput">
								<a-icon type="environment" slot="suffix" style="color: #15837A;" />
							</a-input>
						</a-form-item>
						<a-form-item label="到达地" :label-col="{ span: 4 }" :wrapper-col="{ span: 16 }">
							<a-input readOnly style="width: 280px;" @click="destinationShowMap" class="wy-input" v-decorator="[ 'toCity', {rules: [{ required: true, message: '请选择出发地!' }]}]" placeholder='请选择到达地'>
								<a-icon type="environment" slot="suffix" style="color: #FF2F47;" />
							</a-input>
						</a-form-item>
					</a-col>
					<a-col :span="12">
						<a-form-item label="街道/门牌号" :label-col="{ span: 6 }" :wrapper-col="{ span: 16 }">
							<a-input style="width: 280px;" v-decorator="['fromStreet']" placeholder="详细街道地址（可不填）" @click="getdepartureStreet" />
						</a-form-item>
						<a-form-item label="街道/门牌号" :label-col="{ span: 6 }" :wrapper-col="{ span: 16 }">
							<a-input style="width: 280px;" v-decorator="['toStreet']" placeholder="详细街道地址（可不填）" @click="getdestinationStreet" />
						</a-form-item>
					</a-col>
				</a-row>
			</div>
			<div v-if="supplyType == 3" class="route_choice">
				<p><b>车辆需求</b></p>
				<a-form-item label="选择城市" :label-col="{ span: 3 }" :wrapper-col="{ span: 20 }">
					<a-select style="width: 20%;" placeholder="请选择城市" v-decorator="[ 'city' , {rules: [{ required: true, message: '请选择城市！' }]}]" @change="getMap">
						<a-select-option value="1">
							北京
						</a-select-option>
						<a-select-option value="2">
							上海
						</a-select-option>
						<a-select-option value="3">
							广州
						</a-select-option>
					</a-select>
				</a-form-item>
				<a-form-item label="选择车型" class="vehicle-type" :label-col="{ span: 3 }" :wrapper-col="{ span: 20 }">
					
					<!--<div class="vehicle" :class="item.class" v-for="(item,index) in vehicle_list" @click="getvehicle(index)">
						<a-icon type="check" class="veh-ico" style="background: #15837A ; color: #FFF" />
						<img class="front-img" :src="item.front_img"/>
						<img class="after-img" :src="item.after_img"/>
						<p>{{item.name}}</p>
					</div>-->
					<a-popover placement="bottom" v-for="(item,index) in vehicleType" :key='index'>
					    <template slot="content">
					    	{{item.typeRemark}}
					    </template>
						<div class="vehicle" :class="item.class"  @click="getvehicle(index)">
							<a-icon type="check" class="veh-ico" style="background: #15837A ; color: #FFF" />
							<img class="front-img" :src="item.icoUrl"/>
							<img class="after-img" :src="item.icoUrl"/>
							<p>{{item.dictValue}}</p>
						</div>
					</a-popover>
				</a-form-item>
				<a-form-item label="用车时间" :label-col="{ span: 3 }" :wrapper-col="{ span: 20 }">
					<a-radio-group v-decorator="['useCarTime',{rules: [{ required: true, message: '请选择用车时间！' }]}]">
				        <a-radio value="1">
				          	立即用车
				        </a-radio>
				        <a-radio value="2">
				          	预约时间
				        </a-radio>
				    </a-radio-group>
					<a-date-picker  v-decorator="['useCarDate']" placeholder='请选择预约时间' show-time format="YYYY-MM-DD HH:mm:ss" />
				</a-form-item>
			</div>
			<!--零但、长途、同城货物信息-->
			<div v-if="supplyType!=4" class="route_choice">
				<p><b>货物信息</b></p>
				<div class="sup-info" v-for='(item,index) in huowuArray'>
					<div class="sup-list">
						<a-form-item label="货物图片" :label-col="{ span: 3 }" :wrapper-col="{ span: 16 }" class="upzjimg">
							<div class="clearfix">
							    <a-upload
							    	name="file" 
									:action="uploadUrl"
									v-decorator="['cargoPics'+item.key,{initialValue: item.cargoPics}, {rules: [{ required: true, message: '请选择货物图片!' }]}]"
									listType="picture-card"
									:fileList="item.fileList"
									@preview="handlePreview"
									@change="Positive_Change"
									class="avatar-uploader up_img"
							    >
							      <div v-if="item.fileList.length < 3 && type!='find'">
									<div class="img_zz" @click="uploadIndexClick(index)">
										<a-icon class="wy-font-24" :type="item.loading ? 'loading' : 'plus'" />
									</div>
							      </div>
							    </a-upload>
							    
							    <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
							      <img alt="example" style="width: 100%" :src="previewImage" />
							    </a-modal>
							</div>
						</a-form-item>
						<div class="supply-cargo">
							<a-form-item label="货物名称">
								<a-input @change="inputChangeHuowu('cargoName',index,item.key)" placeholder="请输入货物名称" v-decorator="[ 'cargoName'+item.key, {initialValue: item.cargoName},{rules: [{ required: true, message: '货物名称不能为空!' }]}]" style="width: 150px;" />
								<!--货物类型 长途、同城展示-->
								<a-select v-if="supplyType ==2 || supplyType == 3" style="width: 75px;margin-left: 10px;"  placeholder="货物类型" v-decorator="[ 'cargoCategoryKey'+item.key, {initialValue: item.cargoCategoryKey}]" @change="inputChangeHuowu('cargoCategoryKey',index,item.key)">
									<a-select-option :value="item.dictKey" v-for="(item,index) in goodsType" :key='index'>
										{{item.dictValue}}
									</a-select-option>
								</a-select>
							</a-form-item>
							<a-form-item label="货物类型">
								<a-select placeholder="请选择" v-decorator="['cargoType'+item.key, {initialValue: item.cargoType==1?'重货':'轻货'},{rules: [{ required: true, message: '货物类型不能为空!' }]}]" @change="inputChangeHuowu('cargoType',index,item.key)" style="width: 90px">
									<a-select-option value="1"> 重货 </a-select-option>
									<a-select-option value="2"> 轻货</a-select-option>
								</a-select>
							</a-form-item>
							<a-form-item label="预估重量">
								<a-input placeholder="请输入" @change="inputChangeHuowu('weight',index,item.key)" style="width: 65px" v-decorator="['weight'+item.key,{initialValue: item.weight}]" />
								<a-select placeholder="请选择" v-decorator="['weightUnit'+item.key,{initialValue: item.weightUnit}]" style="width: 75px;margin-left: 10px;"  @change="inputChangeHuowu('weightUnit',index,item.key)">
									<a-select-option value="公斤"> 公斤 </a-select-option>
									<a-select-option value="吨"> 吨 </a-select-option>
								</a-select>
							</a-form-item>
							<a-form-item label="预估体积">
								<a-input placeholder="请输入" v-decorator="['volume'+item.key,{initialValue: item.volume}]"  @change="inputChangeHuowu('volume',index,item.key)" style="width: 90px" />
								<span style="margin-left: 10px;">立方米</span>
							</a-form-item>
						</div>
						<a-form-item label="货物简介" :label-col="{ span: 2 }" :wrapper-col="{ span: 20 }">
							<a-input placeholder="请描述货物简介" v-decorator="[ 'comment'+item.key,{initialValue: item.comment}, {rules: [{ required: true, message: '货物简介不能为空!' }]}]"  @change="inputChangeHuowu('comment',index,item.key)" style="width: 90%" />
						</a-form-item>
					</div>
					<!--零但专线时可添加多个货物-->
					<div class="add-but"  v-if="supplyType==1">
						<a-icon type="plus-circle" v-if="huowuArray.length-1 == index"  @click="huowuAdd" style="color: #15837A;font-size: 30px;" />
						<a-icon type="minus-circle" v-if="huowuArray.length-1 != index" @click="huowuDelete(index)" style="color: #FF495E;font-size: 30px;" />
					</div>
				</div>
			</div>
			<!--长途需求说明-->
			<div v-if="supplyType==2" class="route_choice">
				<p><b>需求说明</b></p>
				<a-form-item label="车辆需求" :label-col="{ span: 2 }" :wrapper-col="{ span: 20 }">
					<a-select style="width: 20%;"  v-decorator="[ 'carLengthKey' , {rules: [{ required: true, message: '请选择车长！' }]}]"  placeholder="请选择车长">
						<a-select-option v-for='(item,index)  in Conductor' :key="index">
							{{item.dictValue}}
						</a-select-option>
					</a-select>
					<a-select  style="width: 20%;margin-left: 10px;" v-decorator="[ 'selectCarKey', {rules: [{ required: true, message: '选择车辆类型！' }]}]"  placeholder="选择车辆类型">
						<a-select-option v-for="(item,index) in carVehicleType" :key="index">
							{{item.dictValue}}
						</a-select-option>
					</a-select>
					<span style="margin-left: 10px;">（填写车辆需求信息，为您精准匹配相关车源。）</span>
				</a-form-item>
				<a-form-item label="期望运价" :label-col="{ span: 2 }" :wrapper-col="{ span: 20 }">
					<a-input style="width: 20%;"  v-decorator="['expectPrice']" />
					<span style="margin-left: 10px;">元    &nbsp; （填写期望运价，为您精准匹配车源信息，如不填写，默认显示为“面议”）</span>
				</a-form-item>
				<a-form-item label="有效期" :label-col="{ span: 2 }" :wrapper-col="{ span: 20 }">
					<a-input style="width:20%;"  v-decorator="['validDay']" />&nbsp;&nbsp;天
					<a-checkbox style="margin-left: 10px;" v-decorator="['longCargo']">长期货源</a-checkbox>
				</a-form-item>
				<a-form-item label="说明" :label-col="{ span: 2 }" :wrapper-col="{ span: 20 }">
					<a-textarea  style="width: 80%;" v-decorator="['remark']" :rows="3" />
				</a-form-item>
			</div>
			<!--同城需求说明-->
			<div v-if="supplyType==3" class="route_choice">
				<p><b>需求说明</b></p>
				<a-form-item label="运输需求" :label-col="{ span: 2 }" :wrapper-col="{ span: 16 }">
					<a-checkbox-group v-decorator="['requirement',  {rules: [{ required: true, message: '请选择运输需求!' }]}]" style="width: 100%;">
						<a-checkbox :value="item.dictKey" v-for="(item,index) in demandType" :key="index">
							{{item.dictValue}}
						</a-checkbox>
					</a-checkbox-group>
				</a-form-item>
				<a-form-item label="备注" :label-col="{ span: 2 }" :wrapper-col="{ span: 16 }">
					<div class="car-label">
						 <!--<span :class="i.class" v-for="(i,index) in Label_list" @click="Label_chenge(index)">
							{{i.name}}
						</span>-->
						<span :class="i.class" v-for="(i,index) in labelType" @click="Label_chenge(index)">
							{{i.dictValue}}
						</span>
					</div>
					<a-textarea  v-decorator="['remark']" :rows="3" />
				</a-form-item>
			</div>
			<!--零但、长途、同城线路信息-->
			<div v-if="supplyType!=4" class="route_choice">
				<p><b>联系方式</b></p>
				<a-row>
					<a-col :span="8" v-if="supplyType==3">
						<a-form-item label="出发地" :label-col="{ span: 5 }" :wrapper-col="{ span: 16 }">
							<a-input readOnly @click="departureShowMap" v-decorator="[ 'fromCity', {rules: [{ required: true, message: '请选择出发地!' }]}]" placeholder='请选择出发地' ref="userNameInput">
								<a-icon type="environment" slot="suffix" style="color: #15837A;" />
							</a-input>
						</a-form-item>
						<a-form-item label="到达地" :label-col="{ span: 5 }" :wrapper-col="{ span: 16 }">
							<a-input readOnly @click="destinationShowMap" class="wy-input" v-decorator="[ 'toCity', {rules: [{ required: true, message: '请选择出发地!' }]}]" placeholder='请选择到达地'>
								<a-icon type="environment" slot="suffix" style="color: #FF2F47;" />
							</a-input>
						</a-form-item>
					</a-col>
					<a-col :span="6">
						<a-form-item label="发货人" :label-col="{ span: 7 }" :wrapper-col="{ span: 14 }">
							<a-input v-decorator="['sendPerson', {rules: [{ required: true, message: '发货人不能为空！'}]}]" />
						</a-form-item>
						<a-form-item label="收货人" :label-col="{ span: 7 }" :wrapper-col="{ span: 14 }">
							<a-input v-decorator="['receivePerson']" />
						</a-form-item>
					</a-col>
					<a-col :span="8">
						<a-form-item label="发货人手机" :label-col="{ span: 6 }" :wrapper-col="{ span: 16 }">
							<a-input v-decorator="['sendMobile', {rules: [{ required: true, message: '发货人手机不能为空！'}]}]" />
						</a-form-item>
						<a-form-item label="收货人手机" :label-col="{ span: 6 }" :wrapper-col="{ span: 16 }">
							<a-input v-decorator="['receiveMobile']" />
						</a-form-item>
					</a-col>
				</a-row>
			</div>
			<div class="ant-row ant-form-item"  v-if='type!="info"' style="margin-left:-90px">
			<div class="ant-col-4 ant-form-item-label"></div>
				<div class="ant-col-20 ant-form-item-control-wrapper">
					<div class="ant-form-item-control">
						<div class="ant-title">
							<span class="title-span" style="margin-left:-50px; font-size:16px; font-weight:700; ">审核意见</span>
						</div>
					   <div class="ant-radio">
						<a-radio-group v-decorator="['approvalStatus']"  >
								<!-- v-decorator="['mode']" -->
					    <a-radio value="0" >
					    通过
					    </a-radio>
					    <a-radio value="1">
					    拒绝 
					    </a-radio>
			   	      </a-radio-group>
					 </div>
					 <div class="a-textarea">
						 <a-textarea placeholder="审核意见" style="margin-top: 10px; width: 447px;height:173px;" :rows="4" />
					 </div>
				</div>
			</div>
		</div>
			<div v-if="type!='find'" class="route_choice">
				<a-row v-if="type=='add'">
					<a-form-item label="" :label-col="{ span: 0 }" :wrapper-col="{ span: 24 }" >
						<a-checkbox v-decorator="['clause',{rules: [{ required: true, message: '请阅读并接受！' }]},{ valuePropName: 'checked' }]">我已阅读并接受<a href="javascript:;" @click="userShow=true">《云南国际物流云用户协议》</a><a href="javascript:;" @click="webShow=true">《用户信息发布协议》</a></a-checkbox>
					</a-form-item>
				</a-row>

				<a-row>
					<a-button type="primary" style="width: 280px;height: 50px;font-size: 18px;" html-type="submit">{{type=='edit'?'提交':'提交'}}</a-button>
					
				</a-row>
			</div>
		</a-form>
		<!--地图Svg显示位置-->
		<map-svg ref="mapSvgDialog" @change="mapSvgCall" @distance="distanceCall"></map-svg>
		<a-modal  :visible="webShow" @cancel="close" width="900px"  :maskClosable='false' :footer="null">
			<web @close="close" v-if="webShow" @cancel="close"></web>
		</a-modal>
		<a-modal  :visible="userShow" @cancel="close" width="900px"  :maskClosable='false' :footer="null">
			<user @close="close" v-if="userShow" @cancel="close"></user>
		</a-modal>
	</div>
</template>
<script>
	import MapSvg from '@/components/dialog/MapSvg'
	import { environment } from '@/environments/environment'
	import { mapState } from 'vuex'
	import Web from '@/components/tool/web'
	import User from '@/components/tool/user'
	export default {
		data() {
			return {
				uploadUrl: environment.FileUploadUrl + '/fileupload/upload', // 图片上传地址
				agreement:false,
				Positive_img: '', // 正面图片
				loading: false,
				previewImage: '',
				previewVisible: false,
				
				addDeliver: true,
				addReceiving: true,
				// 地图存起止数据
				departureData: {},
				destinationData: {},
				distance: '',
				uploadIndex: 0,
				form: this.$form.createForm(this),
				huowuArray: [],

				// 长途整车
				goodsType: [],// 货物类型
				carVehicleType: [],// 车辆类型
				Conductor: [],// 车长
				demandType:[],
				labelType:[],
				vehicleType: [] //车型
			}
		},
		computed: {},
		beforeCreate() {
		},
		created() {
			// 接收URL中传参的数据
			const query = this.$route.query;
			if(query.c || query.d) {
				setTimeout(() => {
					this.form.setFieldsValue({
						fromCity: query.c,
						toCity: query.d
					});
				}, 100);
			}
			// 获取编辑的信息
			if (this.type != 'add') this.getinfo();
			// 添加图片上传数据
			if (this.supplyType != 4 && this.type === 'add') this.huowuAdd();
			this.getType(2)
			this.getType(3)
			this.getType(5)
			this.getType(7)
			this.getType(8)
			this.getType(9)
		},
		components: {
			MapSvg,
			Web,
			User
		},
		watch: {},
		updated(){
		},
		mounted: function() {

		},
		props: ['type','supplyType','detail'],
		methods: {
			//关闭协议弹框
			close(){
				this.webShow=false;
				this.userShow=false;
			},
			// 字典查询名称
			findName (key,obj) {
				for (var i =0;i<obj.length;i++){
					if (obj[i].dictKey == key) return obj[i].dictValue;
				}
			},
			// 获取字典类型
			getType(type){
				this.$get('/info/commonDict', {
					dictType: type
				}).then((r) => {
					switch(type){
						case 2: this.goodsType = r.data.data.rows; break;
						case 3: this.vehicleType = r.data.data.rows; break;
						case 5: this.carVehicleType = r.data.data.rows; break;
						case 7: this.Conductor = r.data.data.rows; break;
						case 8: this.demandType = r.data.data.rows; break;
						case 9: this.labelType = r.data.data.rows; break;
					}
				})
			},
			// 选择标签
			Label_chenge(index) {
				let remark = this.form.getFieldValue('remark') || ''
				for(var i in this.labelType) {
					if(i == index) {
						if(!this.labelType[i].class) {
							this.labelType[i].class = 'active'
							remark += this.labelType[i].dictValue+'，'
						} else {
							this.labelType[i].class = ''
							remark = remark.split(this.labelType[i].dictValue+'，').join("");
						}
					}
				}
				this.form.setFieldsValue({
					remark: remark
				});
			},
			// 选择车型
			getvehicle(index){
				for(var i in this.vehicleType){
					if(i == index){
						this.vehicleType[i].class = 'click-vehicle'
					}else{
						this.vehicleType[i].class = ''
					}
				}
			},
			// 获取编辑的信息
			getinfo(){
				this.$get('/info/infoCargomaster/getCargosmasterById/'+this.detail.cargoId).then((r) => {
					let d = r.data.data
					let obj = {
						type: d.atsupplyType,
						fromCity: d.fromCity,
						toCity: d.toCity,
						fromStreet: d.fromStreet,
						toStreet: d.toStreet,
						sendPerson: d.sendPerson,
						receivePerson: d.receivePerson,
						sendMobile: d.sendMobile,
						receiveMobile: d.receiveMobile,
						longCargo: d.longCargo,
						longCargo: d.longCargo,
						longCargo: d.longCargo,
						expectPrice: d.expectPrice,
						carLengthKey: d.carLengthKey,
						validDay: d.validDay,
						remark: d.remark,
						selectCarKey: d.selectCarKey,
						approvalStatus: d.approvalStatus
					}
					this.huowuArray = [];
					for(let i in d.cargos){
						let newArr = [];
						let arr = d.cargos[i].cargoPics.split(',');
						for (let j = 0;j<arr.length;j++) {
							newArr.push({
								uid: j-1000,
								status:'done',
								url: arr[j]
							})
						}
						this.huowuArray.push({
							key: i,
							cargoCategoryKey: d.cargos[i].cargoCategoryKey,
							cargoPics:  d.cargos[i].cargoPics, // 货物图片
							cargoName: d.cargos[i].cargoName,
							cargoType: d.cargos[i].cargoType,
							weight: d.cargos[i].weight,
							weightUnit: d.cargos[i].weightUnit,
							volume: d.cargos[i].volume,
							comment: d.cargos[i].comment,
							cargoId: d.cargos[i].cargoId,
							fileList: newArr,
							loading: false,
						})
					}
					this.form.setFieldsValue(obj);
				})
				.catch((e) => {})
			},
			// 表单中的字段关联到外部数据中
			inputChangeHuowu(name,index,key) {
				setTimeout(()=>{
					this.huowuArray[index][name] = this.form.getFieldValue(name+key);
				},100)
			},
			// 动态上传点击时存储当前数组数据的index
			uploadIndexClick (index) {
				this.uploadIndex = index;
			},
		    handleCancel () {
		      this.previewVisible = false
		    },
		    handlePreview (file) {
		      this.previewImage = file.url || file.thumbUrl
		      this.previewVisible = true
		    },
			// 货物信息添加
			huowuAdd() {
				this.huowuArray.push({
					key: this.huowuArray.length,
					cargoPics: '', // 货物图片
					cargoName: '',
					cargoType: '',
					weight: '',
					weightUnit: '',
					volume: '',
					comment: '',
					fileList: [],
					loading: false,
				})
			},
			// 货物信息删除
			huowuDelete(index) {
				this.huowuArray.splice(index, 1)
			},
			// 下拉选择框事件
			getMap() {

			},
			// 上传图片前事件处理
			beforeUpload(file) {
				const isJPG = file.type === 'image/jpeg' || 'image/png'
				if(!isJPG) {
					this.$message.error('You can only upload JPG file!')
				}
				const isLt2M = file.size / 1024 / 1024 < 2
				if(!isLt2M) {
					this.$message.error('Image must smaller than 2MB!')
				}
				return isJPG && isLt2M
			},
			// 上传货物图片
			Positive_Change(info) {
			    this.huowuArray[this.uploadIndex].fileList = info.fileList
				if(info.file.status === 'uploading') {
					this.huowuArray[this.uploadIndex].loading = true
					return
				}
				if(info.file.status === 'done') {
					
					this.huowuArray[this.uploadIndex].loading = false
					info.fileList[info.fileList.length-1].url = info.file.response.data.certifJpgFile;
					this.huowuArray[this.uploadIndex].fileList = info.fileList;
					// 每个货物的多个图片拼成字符串，按,分割
					let urls = [];
					for (var i=0;i<info.fileList.length;i++){
						urls.push(info.fileList[i].url);
					}
					this.huowuArray[this.uploadIndex].cargoPics = String(urls);
				}
			},

			// 提交保存
			handleSubmit(e) {
				if(this.loading) return;
				e.preventDefault();
				this.form.validateFieldsAndScroll((err, values) => {
					if(!err) {
						// this.loading = true
						values.cargos = this.huowuArray
						// let name = [];
						// for (var i = 0;i<this.huowuArray.length;i++) {
						// 	name.push(this.huowuArray[i].cargoName)
						// }
						// values.cargoTitle = String(name);
						values.type = this.supplyType;
						
						if (values.cargoCategoryKey) values.cargoCategoryValue = this.findName(values.cargoCategoryKey,this.goodsType);
						if (values.selectCarKey) values.selectCarValue = this.findName(values.selectCarKey,this.carVehicleType);
						if (values.carLengthKey) values.carLengthValue = this.findName(values.carLengthKey,this.Conductor);
						if(values.requirement){
							for(var i in values.requirement){
								values.requirement += values.requirement[i]+','
							}
						}

						if (this.type === 'add') this.addInfoSupply(values)
						if (this.type === 'edit') this.editInfoSupply(values)

					}
				});
			},
			// 添加货源
			addInfoSupply (values) {
				this.$post('/info/infoCargomaster', values, true).then((r) => {
					if(r.status == 200) {
						this.$message.success('添加成功!');
						this.form.resetFields();
						this.huowuArray = [];
						this.huowuAdd();
					}
					this.loading = false;
				}).catch((e) => {
					this.loading = false;
				})
			},
			// 修改货源
			editInfoSupply (values) {
				values.cargoId = this.detail.cargoId;
				this.$put('/info/infoCargomaster', values, true).then((r) => {
					if(r.status == 200) {
						// this.$message.success('编辑成功!');
						this.form.resetFields();
						this.$emit('handleCancel');
					}
					this.loading = false;
				}).catch((e) => {
					this.loading = false;
				})
			},
			// 省市地图回调
			mapSvgCall(d) {
				if(d.name === 'departure') {
					this.form.setFieldsValue({
						fromCity: d.provCityArea
					});
					this.departureData = Object.assign({}, d);
				}
				if(d.name === 'destination') {
					this.form.setFieldsValue({
						toCity: d.provCityArea
					});
					this.destinationData = Object.assign({}, d);
				}
				if(d.name === 'departureStreet') {
					this.form.setFieldsValue({
						fromStreet: d.address
					});
				}
				if(d.name === 'destinationStreet') {
					this.form.setFieldsValue({
						toStreet: d.address
					});
				}
				this.getDistanceCount();
			},
			// 选择出发地
			departureShowMap() {
				this.$refs.mapSvgDialog.mapSvgVisible('departure', 2, '', '', '');
			},
			// 选择到达地
			destinationShowMap() {
				this.$refs.mapSvgDialog.mapSvgVisible('destination', 2, '', '', '');
			},
			// 选择出发地街道/门牌号
			getdepartureStreet() {
				//				this.$refs.mapSvgDialog.mapSvgVisible( 'departureStreet',3,'北京市','通州区','市辖区' );
				this.$refs.mapSvgDialog.mapSvgVisible('departureStreet', 3, this.departureData.province||'', this.departureData.city||'',this.departureData.area||'');
			},
			// 选择到达地街道/门牌号
			getdestinationStreet() {
				//				this.$refs.mapSvgDialog.mapSvgVisible( 'departureStreet',3,'北京市','通州区','市辖区' );
				this.$refs.mapSvgDialog.mapSvgVisible('destinationStreet', 3, this.destinationData.province||'', this.destinationData.city||'',this.destinationData.area||'');
			},
			// 起运地到目的地的距离
			getDistanceCount() {
				if(this.departureData.point && this.destinationData.point) {
					this.$refs.mapSvgDialog.distanceCount(this.departureData.point, this.destinationData.point);
				}
			},
			// 调用距离返回
			distanceCall(num) {
				this.distance = num
				//this.form.setFieldsValue({ juliNum: num });
			},
		},
		computed: {
			...mapState({
				multipage: state => state.setting.multipage,
				user: state => state.account.user,
			}),
		},
	}
</script>

<style lang="less">
.supply-pulish {
	overflow: hidden;
	.route_choice {
		margin: 10px 30px;
	    margin-top: 10px;
	    border-bottom: 1px solid #e8e8e8;
	    padding-bottom: 10px;
		b{
			color: #333333;
			font-size: 16px;
		}
		width: 100%;
		padding: 10px 30px;
		margin-top: 10px;
		.sup-info{
		    max-width: 990px;
		    margin-bottom: 20px;
		    position: relative;
			.sup-list {
			    padding: 20px;
			    background: #F2F2F2;
			}
			.add-but{
			    position: absolute;
			    right: -38px;
			    bottom: 0px;
			}
		}
		.vehicle-type{
			overflow: hidden;
			.vehicle{
				position: relative;
				text-align: center;
				width: 118px;
				height: 80px;
				/*border: 1px solid #15837A;*/
				float: left;
				margin-right: 10px;
				margin-bottom: 10px;
				padding-top:5px;
				p{
					line-height: 30px;
				}
				.front-img{
					display: initial;
					-webkit-filter: grayscale(1);  
					-moz-filter: grayscale(1);  
					-ms-filter: grayscale(1);  
					-o-filter: grayscale(1);      
					filter: grayscale(1);
				}
				.after-img{
					display: none;
				}
				.veh-ico{
					display: none;
				}
			}
			.vehicle:hover{
				border: 2px solid #15837A;
				color: #15837A;
				cursor: pointer;
				.front-img{
					display: none;
				}
				.after-img{
					display: initial;
				}
			}
			.click-vehicle{
				border: 2px solid #15837A;
				color: #15837A;
				.front-img{
					display: none;
				}
				.after-img{
					display: initial;
				}
				.veh-ico{
					display: initial;
					width: 12px;
				    bottom: 0;
				    right: 0;
				    position: absolute;
				    padding: 1px;
				    font-size: 10px;
				    height: 12px;
				    background: rgb(21, 131, 122);
				    color: rgb(255, 255, 255);
				}
			}
		}
		.car-label {
			margin-top: 10px;
			span {
				border: 1px solid #15837A;
				width: 100px;
				height: 40px;
				border-radius: 2px;
				text-align: center;
				line-height: 36px;
				font-size: 14px;
				display: inline-block;
				margin-right: 30px;
				margin-bottom: 20px;
			}
			.active {
				background: #15837A;
				color: #fff;
			}
			.span:first-child {
				margin-left: 0;
			}
			span,
			span:hover {
				cursor: pointer;
			}
		}
		.upzjimg {
			.ant-upload {
				padding: 0;
			}
			.ant-upload-list-picture-card .ant-upload-list-item {
				width: 80px;
				height: 80px;
			}
			.ant-upload.ant-upload-select-picture-card {
				border: 1px solid #DDDDDD;
			}
			.ant-upload-list-item{
				padding: 0px;
			}
			.up_img {
				float: left;
				position: relative;
				.ant-upload.ant-upload-select-picture-card {
					width: 80px;
					height: 80px;
				}
				img {
					width: 80px;
					height: 80px;
				}
				.up_img_d {
					color: #DDDDDD;
					width: 80px;
					height: 80px;
					padding-top: 28px;
				}
				.img_zz {
					width: 80px;
					height: 80px;
					padding-top: 30px;
					color: #dddddd;
				}
			}
		}
		.choice-left {
			position: relative;
			.distance {
				position: absolute;
				width: 100px;
				height: 100px;
				left: 350px;
				text-align: right;
				.border-top {
					width: 60px;
					height: 20px;
					border-top: 1px solid;
					border-right: 1px solid;
					margin-top: 20px;
				}
				.border-bottom {
					width: 60px;
					height: 20px;
					border-bottom: 1px solid;
					border-right: 1px solid;
				}
			}
		}
	}
	.supply-cargo{
		overflow: hidden;
		.ant-form-item{
			display: inline-block;
			margin-right: 20px;
			.ant-form-item-label,.ant-form-item-label{
				width: 82px;
				min-width: 82px;
			}
			.ant-form-item-control-wrapper{
				display: inline-block;
			}
		}
	}
	.route_choice:last-child{
		border-bottom: none;
	}
	.route_but {
		width: 100%;
		border: 1px solid #eee;
		padding: 10px 30px;
		margin-top: 10px;
		text-align: center;
	}
	w_75{ width:75px; }
}
</style>